import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { BgImg, Img, ObserverText, ObserverView } from "../../components";
import { dpw10, dpw12, dpw208, dpw240 } from "../../constants";
import { SvgFirst } from "../../components/svg";
const Header = (props: any) => {
    const { classTitle, firstName, firstUrl } = props
    
    return (
        <View style={{ height: dpw208, marginBottom: dpw12, position: 'relative' }}>
            {firstUrl && <Img style={{ height: dpw208 }} url={firstUrl} />}
            <ObserverView style={styles.mask} themeStyle={{ backgroundColor: 'color_29' }} />
            <View style={{ ...styles.mask, ...styles.con }}>
                <SvgFirst />
                <ObserverText tKey={classTitle || ''} type="head-t" />
                <ObserverText tKey='hotCover' tOptions={{ name: firstName || '' }} themeStyle={{ color: 'color_2' }} type="desc" />
            </View>
        </View>
    );
};
 
export default Header;

const styles = StyleSheet.create({
    mask: {
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
        zIndex: 1,
    },
    con: {
        justifyContent: 'center',
        alignItems: 'center'
    }
})